<template>
  <!-- <el-container class="index-con">
    <el-header class="index-header">
      <navcon></navcon>
    </el-header>
    <el-container class="index-con">
      <el-aside :class="showclass">
        <leftnav></leftnav>
      </el-aside>
      <el-container class="main-con">
        <el-main clss="index-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container> -->

  <el-container class="hn-base-page-body">
    <el-header class="header-div">
      <navcon></navcon>
    </el-header>

    <el-container class="main-con">
      <el-aside :class="showclass">
        <leftnav></leftnav>
      </el-aside>
      <el-main clss="index-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
// 导入组件
import navcon from '../components/navcon.vue'
import leftnav from '../components/leftnav.vue'
export default {
  name: 'index',
  data() {
    return {
      showclass: 'asideshow',
      showtype: false
    }
  },
  // 注册组件
  components: {
    navcon,
    leftnav
  },
  methods: {},
  created() {
    this.$store.commit('login', 'true')
    // 监听
    this.$root.Bus.$on('toggle', value => {
      if (value) {
        this.showclass = 'asideshow'
      } else {
        setTimeout(() => {
          this.showclass = 'aside'
        }, 300)
      }
    })
  },
  beforeUpdate() { },
  // 挂载前状态(里面是操作)
  beforeMount() {
  }
}
</script>
<style lang="scss">
.hn-base-page-body {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .header-div {
    width: 100%;
    height: 100%;
    background: url(../assets/images/hnfwglxt/header-bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;

    .header-logo {
      width: 21.04166666%;
      height: 75.55555%;
      // background: url(../assets/images/hnfwglxt/header-logo1.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      margin-left: 1rem;

      span {
        color: #fff;
        font-size: .7rem;
        font-weight: bold;
      }
    }

    .right-div {
      width: 50%;
      height: .6rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0.93798854%;

      .user-style {
        float: right;
        height: 100%;
        font-size: .475rem;
        font-weight: normal;
        color: #ffffff;
        font-family: 'SourceHanSansCN-Normal';
        margin-top: 0;
      }

      .cut-line {
        float: right;
        width: .025rem;
        height: 100%;
        background: #ffffff;
        margin: 0 1% 0 .5%;
      }

      .close-icon {
        float: right;
        width: .575rem;
        height: 100%;
        background: url(../assets/images/hnfwglxt/close-icon.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }

  .substance-div {
    width: 100%;
    height: 92.1807%;
    display: flex;
    justify-content: start;

    .menu-div {
      width: 18%;
      height: 100%;
      background: #fff;
      box-shadow: 0 .075rem .125rem 0 rgba(0, 0, 0, 0.50);
      padding: .5% 0 1% 0;
      box-sizing: border-box;
      overflow: auto;

      .menu-style {

        &:nth-child(1) {

          .icon-style {
            display: inline-block;
            width: .475rem;
            height: .325rem;
            background: url(../assets/images/hnfwglxt/icon11.png) no-repeat;
            background-size: 100% 100%;
            margin-right: 10%;
            position: relative;
            top: -.1rem;
          }
        }

        &:nth-child(2) {

          .icon-style {
            display: inline-block;
            width: .45rem;
            height: .425rem;
            background: url(../assets/images/hnfwglxt/icon9.png) no-repeat;
            background-size: 100% 100%;
            margin-right: 10%;
          }
        }

        &:nth-child(3) {

          .icon-style {
            display: inline-block;
            width: .475rem;
            height: .45rem;
            background: url(../assets/images/hnfwglxt/icon10.png) no-repeat;
            background-size: 100% 100%;
            margin-right: 10%;
          }
        }

        .grop-icon-style {
          display: inline-block;
          width: .375rem;
          height: .375rem;
          background: url(../assets/images/hnfwglxt/icon5.png) no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
        }

        .choose-grop-icon-style {
          background: url(../assets/images/hnfwglxt/icon6.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      .choose-menu-style {
        width: 100%;
        height: 100%;
        background: url(../assets/images/hnfwglxt/menu-bg.png) no-repeat;
        background-size: 100%;

        /deep/.el-submenu__title {
          color: #fff !important;
        }

        /deep/.el-submenu__title span {
          position: relative;
          top: -.1rem;
        }

        /deep/.el-submenu__title i {
          color: #fff;
        }
      }

      /deep/.el-submenu__title {
        font-size: .5rem;
        font-weight: 400;
        text-align: left;
        font-family: 'SourceHanSansCN-Normal';
      }

      /deep/.el-submenu .el-menu-item {
        font-size: .45rem;
        font-weight: 700;
        font-family: 'SourceHanSansCN-Normal';
        display: flex;
        align-items: center;
      }

      /deep/.el-menu-item-group__title {
        padding: 0 0 0 20px;
      }

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
      }

      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
      }
    }

    .content-div {
      width: 86.868161%;
      height: 100%;
      background: #eef3fa;
    }
  }
}
</style>
